//轮播
var a=1
var timer = setInterval(move,3000)
function move(){
	if(a>=11){
		a=0
	}
	$(".mid-act").css("margin-left",-225*a+"px")
	a++
	
}

$(".mid-act")[0].addEventListener("transitionend", function() {
	
	// 只要动画一结束就会自动执行这里的代码
	
	// 0, 1, 2, 3, 4, 5
	
//	console.log("当前的图标下标：", a)
	
	// 判断如果已经是最后一张了，那么需要偷梁换柱！
	if (a >= 11) {
		// 立刻换到第一张图片 ==> 改变ul的marginLeft 0
		
		//   切换之前： 关闭动画
		$(".mid-act").css("transition", "none")
		
		$(".mid-act").css("marginLeft", 0)
			
		// 因为动画关闭可能存在部分延迟，所以，瞬间切换的代码要稍微晚点执行
		//  延时器 1秒执行
		
		setTimeout(function() {
			
			//   切换之后： 打开动画
			$(".mid-act").css("transition", "0.5s")
			
			// 下标重新从0开始计数
			a = 0
		}, 100)
	}
	
	
})

$(".mid-act li").mouseover(function() {

	clearInterval( timer )
})

$(".mid-act,.left-arrow,.right-arrow").mouseleave(function() {
	clearInterval( timer )
	timer = setInterval(move, 3000)
})

//箭头控制
$(".left-arrow").click(function(){
//	console.log(a)
	if(a>1){a--
	$(".mid-act").css("margin-left",225*(1-a) + "px")
	clearInterval( timer )
}
})

$(".right-arrow").click(function(){
//	console.log(a)
	if(a<11){a++
	$(".mid-act").css("margin-left",-225*(a-1) + "px")
	clearInterval( timer )
}
})
